<template>
    <div class="book-detail-container">
      <!-- 图书基本信息 -->
      <div class="book-info">
        <h2>{{ book.title }}</h2>
        <p><strong>作者：</strong>{{ book.author }}</p>
        <p><strong>出版社：</strong>{{ book.publisher }}</p>
        <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
        <p><strong>ISBN：</strong>{{ book.isbn }}</p>
        <p><strong>简介：</strong>{{ book.description }}</p>
      </div>
  
      <!-- 用户评价 -->
      <div class="user-reviews">
        <h3>用户评价</h3>
        <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
          <p><strong>{{ review.user }}</strong></p>
          <p>{{ review.comment }}</p>
        </el-card>
      </div>
  
      <!-- 借阅按钮 -->
      <el-button type="primary" @click="openBorrowDialog">借阅</el-button>
  
      <!-- 分步借阅弹窗 -->
      <el-dialog v-model="borrowDialogVisible" title="借阅流程" :width="dialogWidth">
        <div class="borrow-dialog-content">
          <!-- 步骤条 -->
          <el-steps
            :active="currentStep"
            finish-status="success"
            :simple="!isMobile"
            align-center
          >
            <el-step title="书籍信息" description="确认书籍信息"></el-step>
            <el-step title="选择借阅时长" description="选择借书和还书日期"></el-step>
            <el-step title="确认借阅信息" description="确认借阅信息"></el-step>
          </el-steps>
  
          <!-- 步骤内容 -->
          <div class="borrow-step">
            <div v-if="currentStep === 1">
              <h4>书籍信息</h4>
              <p><strong>书名：</strong>{{ book.title }}</p>
              <p><strong>作者：</strong>{{ book.author }}</p>
              <p><strong>ISBN：</strong>{{ book.isbn }}</p>
              <el-button type="success" @click="nextStep">下一步</el-button>
            </div>
  
            <div v-if="currentStep === 2">
              <h4>选择借阅时长</h4>
              <el-date-picker
                v-model="borrowDate"
                type="date"
                placeholder="选择借书日期"
                class="date-picker"
              ></el-date-picker>
              <el-date-picker
                v-model="returnDate"
                type="date"
                placeholder="选择还书日期"
                class="date-picker"
              ></el-date-picker>
              <el-button type="success" @click="nextStep">下一步</el-button>
            </div>
  
            <div v-if="currentStep === 3">
              <h4>确认借阅信息</h4>
              <p><strong>书名：</strong>{{ book.title }}</p>
              <p><strong>作者：</strong>{{ book.author }}</p>
              <p><strong>借书日期：</strong>{{ borrowDate }}</p>
              <p><strong>还书日期：</strong>{{ returnDate }}</p>
              <el-button type="success" @click="completeBorrow">完成借阅</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from "vue";
  import { ElMessage } from "element-plus";
  
  const book = {
    title: "Vue.js 实战",
    author: "尤雨溪",
    publisher: "电子工业出版社",
    publishDate: "2023-01-01",
    isbn: "978-7-121-39000-1",
    description: "深入学习 Vue.js 的核心原理与实战技巧。",
  };
  
  const reviews = ref([
    { user: "张三", comment: "这本书非常实用，适合初学者！" },
    { user: "李四", comment: "内容很详细，推荐给大家！" },
  ]);
  
  const borrowDialogVisible = ref(false);
  const currentStep = ref(1);
  const borrowDate = ref(null);
  const returnDate = ref(null);
  
  const isMobile = computed(() => window.innerWidth <= 768);
  const dialogWidth = computed(() => (isMobile.value ? "90%" : "50%"));
  
  const openBorrowDialog = () => {
    borrowDialogVisible.value = true;
    currentStep.value = 1;
  };
  
  const nextStep = () => {
    if (currentStep.value === 2 && (!borrowDate.value || !returnDate.value)) {
      ElMessage.error("请选择借书和还书日期！");
    } else {
      currentStep.value += 1;
    }
  };
  
  const completeBorrow = () => {
    if (borrowDate.value && returnDate.value) {
      if (new Date(borrowDate.value) < new Date(returnDate.value)) {
        ElMessage.success("借阅成功！");
        borrowDialogVisible.value = false;
      } else {
        ElMessage.error("借书日期必须早于还书日期！");
      }
    } else {
      ElMessage.error("请选择借书和还书日期！");
    }
  };
  </script>
  
  <style scoped>
  .book-detail-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .book-info {
    margin-bottom: 20px;
  }
  
  .user-reviews {
    margin-bottom: 20px;
  }
  
  .review-card {
    margin-bottom: 10px;
  }
  
  .borrow-step {
    text-align: center;
  }
  
  .el-button {
    display: block;
    margin: 20px auto;
  }
  
  .date-picker {
    margin-bottom: 10px;
  }
  
  /* 媒体查询：移动端适配 */
  @media (max-width: 768px) {
    .book-detail-container {
      padding: 10px;
    }
  
    .el-dialog {
      width: 90% !important;
    }
  
    .borrow-dialog-content {
      padding: 10px;
    }
  
    .el-date-picker {
      width: 100%;
    }
  
    .el-button {
      width: 100%;
    }
  
    .el-steps {
      padding: 0 10px;
    }
  }
  </style>